<style>

    /*** 筛选区域 ****/
    .filter-section {
        background-color: white;
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: var(--shadow);
    }

    .filter-section .filter-title {
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--dark);
    }

    .filter-section .filter-group {
        margin-bottom: 1.5rem;
    }

    .filter-section .filter-group:last-child {
        margin-bottom: 0;
    }

    .filter-section .badge-filter {
        cursor: pointer;
        transition: all 0.2s;
    }

    .filter-section .badge-filter:hover {
        transform: scale(1.05);
    }

    .filter-section .search-box {
        position: relative;
    }

    .filter-section .search-box input {
        padding-left: 2.5rem;
    }

    .filter-section .search-icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--secondary);
    }

    .filter-section .sort-options {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .filter-section .sort-btn {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.75rem;
        border-radius: 0.25rem;
        border: 1px solid var(--border);
        background: white;
        transition: all 0.2s;
    }

    .filter-section .sort-btn:hover, .filter-section .sort-btn.active {
        background-color: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .filter-section .filter-tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .filter-section .applied-filters {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    .filter-section .clear-filter {
        cursor: pointer;
        color: var(--primary);
        font-size: 0.875rem;
    }

    .filter-section .clear-filter:hover {
        text-decoration: underline;
    }

    /*** 列表 ***/
    .tag-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }


    /*** 公共 ***/
    .tag-author {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .tag-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
    }

    .tag-stats {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 0.875rem;
        color: var(--secondary);
    }

    .tag-stat {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .tag-actions {
        display: flex;
        gap: 0.5rem;
    }

    .tag-action-btn {
        border: none;
        background: none;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        transition: all 0.2s;
    }

    .tag-action-btn:hover {
        background-color: var(--primary-light);
        color: var(--primary);
    }

    /*** 标签网格视图 ***/
    .tag-card {
        transition: all 0.3s ease;
        border: none;
        border-radius: 0.75rem;
        overflow: hidden;


        padding: 1rem;
        background-color: white;
        margin-bottom: 1rem;
    }

    .tag-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }


    .tag-card .image-row {
        display: flex;
        gap: 4px;
        height: 140px;
    }

    .tag-card .image-row img {
        flex: 1;
        height: 100%;
        object-fit: cover;
    }

    .tag-card .image-single {
        height: 180px;
    }

    .tag-card .image-single img, .tag-card .image-single2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.5rem;
    }


    /*** 标签列表 ****/
    .image-single2 {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
    }


    @media (max-width: 768px) {

        /*** 列表 ****/
        .tag-card .image-row {
            height: 120px;
        }

        /*** 筛选区域 ****/
        .filter-section {
            padding: 1rem;
        }
    }
</style>


<div class="container">
    <h1 class="mb-5 text-center">标签探索</h1>

    <!-- 筛选区域 -->
    <div class="filter-section">
        <div class="row">
            <!-- 左侧筛选器 -->
            <div class="col-md-8">
                <!-- 搜索框 -->
                <div class="filter-group">
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="form-control" placeholder="搜索标签、描述或作者...">
                    </div>
                </div>

                <!-- 分类筛选 -->
                <div class="filter-group">
                    <div class="filter-title">分类</div>
                    <div class="filter-tags-container">
                        <span class="badge badge-filter bg-primary text-white">全部</span>
                        <span class="badge badge-filter bg-light text-dark border">生活方式</span>
                        <span class="badge badge-filter bg-light text-dark border">兴趣爱好</span>
                        <span class="badge badge-filter bg-light text-dark border">艺术文化</span>
                        <span class="badge badge-filter bg-light text-dark border">科技数码</span>
                        <span class="badge badge-filter bg-light text-dark border">美食烹饪</span>
                        <span class="badge badge-filter bg-light text-dark border">旅行户外</span>
                        <span class="badge badge-filter bg-light text-dark border">健康运动</span>
                        <span class="badge badge-filter bg-light text-dark border">职场技能</span>
                    </div>
                </div>

                <!-- 状态筛选 -->
                <div class="filter-group">
                    <div class="filter-title">标签状态</div>
                    <div class="filter-tags-container">
                        <span class="badge badge-filter bg-light text-dark border">全部状态</span>
                        <span class="badge badge-filter bg-light text-dark border">热门</span>
                        <span class="badge badge-filter bg-light text-dark border">新标签</span>
                        <span class="badge badge-filter bg-light text-dark border">趋势</span>
                        <span class="badge badge-filter bg-light text-dark border">小众</span>
                    </div>
                </div>
            </div>

            <!-- 右侧排序 -->
            <div class="col-md-4">
                <div class="filter-group">
                    <div class="filter-title">排序方式</div>
                    <div class="sort-options">
                        <button class="sort-btn active">
                            <i class="fas fa-fire"></i> 热门程度
                        </button>
                        <button class="sort-btn">
                            <i class="fas fa-clock"></i> 最新发布
                        </button>
                        <button class="sort-btn">
                            <i class="fas fa-eye"></i> 最多浏览
                        </button>
                        <button class="sort-btn">
                            <i class="fas fa-comment"></i> 最多评论
                        </button>
                    </div>
                </div>

                <div class="filter-group">
                    <div class="filter-title">时间范围</div>
                    <select class="form-select">
                        <option value="all">全部时间</option>
                        <option value="today">今天</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                        <option value="year">今年</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 已选筛选条件 -->
        <div class="applied-filters">
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <span class="text-sm text-secondary">已选筛选:</span>
                <span class="badge bg-primary text-white">热门 <i class="fas fa-times clear-filter ms-1"></i></span>
                <span class="badge bg-primary text-white">生活方式 <i class="fas fa-times clear-filter ms-1"></i></span>
                <span class="clear-filter ms-auto">清除全部筛选</span>
            </div>
        </div>
    </div>


    <!-- 标签网格视图 -->
    <div class="tag-grid" id="tagGrid">
        <div class="card tag-card shadow-sm">
            <div class="image-single">
                <img src="https://picsum.photos/600/400?random=1" alt="旅行摄影" class="w-100">
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h5 class="card-title mb-0">旅行摄影</h5>
                    <span class="badge bg-primary text-white">热门</span>
                </div>
                <p class="card-text text-sm text-secondary mb-3 line-clamp-2">
                    分享旅途中的美好瞬间，交流摄影技巧和经验，记录世界各地的风景人文。
                </p>
                <div class="tag-author mb-3">
                    <img src="https://picsum.photos/100/100?random=101" alt="李明的头像" class="tag-avatar">
                    <span class="text-sm font-medium">李明</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="tag-stats">
                        <span class="tag-stat"><i class="far fa-eye"></i> 12.5k</span>
                        <span class="tag-stat"><i class="far fa-comment"></i> 342</span>
                    </div>
                    <div class="tag-actions">
                        <button class="tag-action-btn"><i class="far fa-heart"></i> 2.1k</button>
                        <button class="tag-action-btn"><i class="far fa-bookmark"></i> 收藏</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card tag-card shadow-sm">
            <div class="image-row">
                <img src="https://picsum.photos/300/300?random=11" alt="户外露营" class="rounded-top-start">
                <img src="https://picsum.photos/300/300?random=12" alt="户外露营">
                <img src="https://picsum.photos/300/300?random=13" alt="户外露营" class="rounded-top-end">
            </div>
            <div class="card-body">
                <h5 class="card-title mb-2">户外露营</h5>
                <div class="tag-author mb-3">
                    <img src="https://picsum.photos/100/100?random=104" alt="刘强的头像" class="tag-avatar">
                    <span class="text-sm font-medium">刘强</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="tag-stats">
                        <span class="tag-stat"><i class="far fa-eye"></i> 9.2k</span>
                        <span class="tag-stat"><i class="far fa-comment"></i> 427</span>
                    </div>
                    <div class="tag-actions">
                        <button class="tag-action-btn"><i class="far fa-heart"></i> 1.2k</button>
                        <button class="tag-action-btn"><i class="far fa-bookmark"></i> 收藏</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card tag-card shadow-sm">
            <div class="image-single">
                <img src="https://picsum.photos/600/400?random=2" alt="美食探店" class="w-100">
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h5 class="card-title mb-0">美食探店</h5>
                    <span class="badge bg-success text-white">新标签</span>
                </div>
                <p class="card-text text-sm text-secondary mb-3 line-clamp-2">
                    发现城市里的隐藏美食，分享餐厅体验和私房菜谱，美食爱好者的交流社区。
                </p>
                <div class="tag-author mb-3">
                    <img src="https://picsum.photos/100/100?random=102" alt="王芳的头像" class="tag-avatar">
                    <span class="text-sm font-medium">王芳</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="tag-stats">
                        <span class="tag-stat"><i class="far fa-eye"></i> 8.7k</span>
                        <span class="tag-stat"><i class="far fa-comment"></i> 512</span>
                    </div>
                    <div class="tag-actions">
                        <button class="tag-action-btn"><i class="far fa-heart"></i> 1.5k</button>
                        <button class="tag-action-btn"><i class="far fa-bookmark"></i> 收藏</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card tag-card shadow-sm">
            <div class="image-single">
                <img src="https://picsum.photos/600/400?random=3" alt="极简主义" class="w-100">
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h5 class="card-title mb-0">极简主义</h5>
                    <span class="badge bg-secondary text-white">趋势</span>
                </div>
                <p class="card-text text-sm text-secondary mb-3 line-clamp-2">
                    探讨简约生活方式，分享极简设计、收纳技巧和断舍离经验，追求品质而非数量。
                </p>
                <div class="tag-author mb-3">
                    <img src="https://picsum.photos/100/100?random=103" alt="张伟的头像" class="tag-avatar">
                    <span class="text-sm font-medium">张伟</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="tag-stats">
                        <span class="tag-stat"><i class="far fa-eye"></i> 6.3k</span>
                        <span class="tag-stat"><i class="far fa-comment"></i> 218</span>
                    </div>
                    <div class="tag-actions">
                        <button class="tag-action-btn"><i class="far fa-heart"></i> 987</button>
                        <button class="tag-action-btn"><i class="far fa-bookmark"></i> 收藏</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 标签列表视图 (默认隐藏) -->
    <div class="tag-list" id="tagList" style="display: block;">
        <div class="tag-card flex">
            <div class="image-single2">
                <img src="https://picsum.photos/300/300?random=1" alt="旅行摄影" class="list-image">
            </div>
            <div class="flex-grow ms-3">
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <h5 class="mb-0">旅行摄影</h5>
                    <span class="badge bg-primary text-white">热门</span>
                </div>
                <p class="text-sm text-secondary mb-2 line-clamp-1">
                    分享旅途中的美好瞬间，交流摄影技巧和经验，记录世界各地的风景人文。
                </p>
                <div class="tag-author mb-2">
                    <img src="https://picsum.photos/100/100?random=101" alt="李明的头像" class="tag-avatar"
                         style="width:28px;height:28px;">
                    <span class="text-sm">李明</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="tag-stats">
                        <span class="tag-stat"><i class="far fa-eye"></i> 12.5k</span>
                        <span class="tag-stat"><i class="far fa-comment"></i> 342</span>
                        <span class="tag-stat"><i class="far fa-heart"></i> 2.1k</span>
                    </div>
                    <div class="tag-actions">
                        <button class="tag-action-btn"><i class="far fa-bookmark"></i> 收藏</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="tag-card flex">
            <div class="image-single2">
                <img src="https://picsum.photos/300/300?random=12" alt="户外露营" class="list-image">
            </div>
            <div class="flex-grow ms-3">
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <h5 class="mb-0">户外露营</h5>
                    <span class="badge bg-secondary text-white">趋势</span>
                </div>
                <p class="text-sm text-secondary mb-2 line-clamp-1">
                    分享露营装备、营地推荐和户外生存技巧，交流自然探索的乐趣与经验。
                </p>
                <div class="tag-author mb-2">
                    <img src="https://picsum.photos/100/100?random=104" alt="刘强的头像" class="tag-avatar"
                         style="width:28px;height:28px;">
                    <span class="text-sm">刘强</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="tag-stats">
                        <span class="tag-stat"><i class="far fa-eye"></i> 9.2k</span>
                        <span class="tag-stat"><i class="far fa-comment"></i> 427</span>
                        <span class="tag-stat"><i class="far fa-heart"></i> 1.2k</span>
                    </div>
                    <div class="tag-actions">
                        <button class="tag-action-btn"><i class="far fa-bookmark"></i> 收藏</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="tag-card flex">
            <div class="image-single2">
                <img src="https://picsum.photos/300/300?random=2" alt="美食探店" class="list-image">
            </div>
            <div class="flex-grow ms-3">
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <h5 class="mb-0">美食探店</h5>
                    <span class="badge bg-success text-white">新标签</span>
                </div>
                <p class="text-sm text-secondary mb-2 line-clamp-1">
                    发现城市里的隐藏美食，分享餐厅体验和私房菜谱，美食爱好者的交流社区。
                </p>
                <div class="tag-author mb-2">
                    <img src="https://picsum.photos/100/100?random=102" alt="王芳的头像" class="tag-avatar"
                         style="width:28px;height:28px;">
                    <span class="text-sm">王芳</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="tag-stats">
                        <span class="tag-stat"><i class="far fa-eye"></i> 8.7k</span>
                        <span class="tag-stat"><i class="far fa-comment"></i> 512</span>
                        <span class="tag-stat"><i class="far fa-heart"></i> 1.5k</span>
                    </div>
                    <div class="tag-actions">
                        <button class="tag-action-btn"><i class="far fa-bookmark"></i> 收藏</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="tag-card flex">
            <div class="image-single2">
                <img src="https://picsum.photos/300/300?random=3" alt="极简主义" class="list-image">
            </div>
            <div class="flex-grow ms-3">
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <h5 class="mb-0">极简主义</h5>
                    <span class="badge bg-secondary text-white">趋势</span>
                </div>
                <p class="text-sm text-secondary mb-2 line-clamp-1">
                    探讨简约生活方式，分享极简设计、收纳技巧和断舍离经验，追求品质而非数量。
                </p>
                <div class="tag-author mb-2">
                    <img src="https://picsum.photos/100/100?random=103" alt="张伟的头像" class="tag-avatar"
                         style="width:28px;height:28px;">
                    <span class="text-sm">张伟</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="tag-stats">
                        <span class="tag-stat"><i class="far fa-eye"></i> 6.3k</span>
                        <span class="tag-stat"><i class="far fa-comment"></i> 218</span>
                        <span class="tag-stat"><i class="far fa-heart"></i> 987</span>
                    </div>
                    <div class="tag-actions">
                        <button class="tag-action-btn"><i class="far fa-bookmark"></i> 收藏</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 筛选标签点击事件
		const filterTags = document.querySelectorAll('.badge-filter');
		filterTags.forEach(tag => {
			tag.addEventListener('click', function () {
				// 切换激活状态
				if (this.textContent.trim() === '全部') {
					// 如果点击"全部"，取消其他所有筛选
					filterTags.forEach(t => {
						if (t !== this) {
							t.classList.remove('bg-primary', 'text-white');
							t.classList.add('bg-light', 'text-dark', 'border');
						}
					});
					// 激活当前标签
					this.classList.remove('bg-light', 'text-dark', 'border');
					this.classList.add('bg-primary', 'text-white');
				} else {
					// 取消"全部"的激活状态
					filterTags.forEach(t => {
						if (t.textContent.trim() === '全部') {
							t.classList.remove('bg-primary', 'text-white');
							t.classList.add('bg-light', 'text-dark', 'border');
						}
					});
					// 切换当前标签状态
					if (this.classList.contains('bg-primary')) {
						this.classList.remove('bg-primary', 'text-white');
						this.classList.add('bg-light', 'text-dark', 'border');
					} else {
						this.classList.remove('bg-light', 'text-dark', 'border');
						this.classList.add('bg-primary', 'text-white');
					}
				}

				// 这里可以添加筛选逻辑
				updateAppliedFilters();
			});
		});

		// 排序按钮点击事件
		const sortButtons = document.querySelectorAll('.sort-btn');
		sortButtons.forEach(btn => {
			btn.addEventListener('click', function () {
				sortButtons.forEach(b => b.classList.remove('active'));
				this.classList.add('active');
				// 这里可以添加排序逻辑
			});
		});


		// 清除单个筛选条件
		const clearFilters = document.querySelectorAll('.clear-filter');
		clearFilters.forEach(btn => {
			btn.addEventListener('click', function (e) {
				e.stopPropagation();
				const filterBadge = this.closest('.badge');
				if (filterBadge) {
					filterBadge.remove();
				} else {
					// 清除全部筛选
					document.querySelectorAll('.applied-filters .badge.bg-primary').forEach(b => b.remove());
					// 重置筛选标签
					filterTags.forEach(tag => {
						if (tag.textContent.trim() === '全部') {
							tag.classList.remove('bg-light', 'text-dark', 'border');
							tag.classList.add('bg-primary', 'text-white');
						} else {
							tag.classList.remove('bg-primary', 'text-white');
							tag.classList.add('bg-light', 'text-dark', 'border');
						}
					});
				}

				if (document.querySelectorAll('.applied-filters .badge.bg-primary').length === 0) {
					document.querySelector('.applied-filters').style.display = 'none';
				}
			});
		});

		// 点赞功能
		const likeButtons = document.querySelectorAll('.tag-action-btn:has(.far.fa-heart), .tag-action-btn:has(.fas.fa-heart)');
		likeButtons.forEach(btn => {
			btn.addEventListener('click', function () {
				const icon = this.querySelector('i');
				const textNode = this.childNodes[1];
				const countText = textNode.textContent.trim();
				let count = parseInt(countText);

				if (icon.classList.contains('far')) {
					// 点赞
					icon.classList.remove('far');
					icon.classList.add('fas', 'text-primary');
					textNode.textContent = ` ${count + 1}`;
					showToast('点赞成功');
				} else {
					// 取消点赞
					icon.classList.remove('fas', 'text-primary');
					icon.classList.add('far');
					textNode.textContent = ` ${count - 1}`;
					showToast('已取消点赞');
				}
			});
		});

		// 收藏功能
		const bookmarkButtons = document.querySelectorAll('.tag-action-btn:has(.far.fa-bookmark), .tag-action-btn:has(.fas.fa-bookmark)');
		bookmarkButtons.forEach(btn => {
			btn.addEventListener('click', function () {
				const icon = this.querySelector('i');

				if (icon.classList.contains('far')) {
					// 收藏
					icon.classList.remove('far');
					icon.classList.add('fas', 'text-primary');
					showToast('收藏成功');
				} else {
					// 取消收藏
					icon.classList.remove('fas', 'text-primary');
					icon.classList.add('far');
					showToast('已取消收藏');
				}
			});
		});

		// 更新已选筛选条件显示
		function updateAppliedFilters() {
			const appliedFiltersContainer = document.querySelector('.applied-filters .d-flex');
			const activeFilters = document.querySelectorAll('.badge-filter.bg-primary:not(:contains("全部"))');

			// 清除现有筛选标签（保留"已选筛选:"文本）
			const existingBadges = appliedFiltersContainer.querySelectorAll('.badge.bg-primary');
			existingBadges.forEach(badge => badge.remove());

			// 添加当前活跃的筛选标签
			activeFilters.forEach(filter => {
				const filterText = filter.textContent.trim();
				const badge = document.createElement('span');
				badge.className = 'badge bg-primary text-white';
				badge.innerHTML = `${filterText} <i class="fas fa-times clear-filter ms-1"></i>`;

				// 添加清除单个筛选的事件
				badge.querySelector('.clear-filter').addEventListener('click', function (e) {
					e.stopPropagation();
					badge.remove();

					// 同时更新筛选标签状态
					filter.classList.remove('bg-primary', 'text-white');
					filter.classList.add('bg-light', 'text-dark', 'border');

					if (appliedFiltersContainer.querySelectorAll('.badge.bg-primary').length === 0) {
						document.querySelector('.applied-filters').style.display = 'none';
					}
				});

				appliedFiltersContainer.insertBefore(badge, document.querySelector('.clear-filter'));
			});

			// 显示或隐藏已选筛选区域
			if (activeFilters.length > 0) {
				document.querySelector('.applied-filters').style.display = 'block';
			} else {
				document.querySelector('.applied-filters').style.display = 'none';
			}
		}

	});
</script>


    
